<template>
  <nav class="navbar">
    <ul>
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/price">价格</router-link></li>
      <li><router-link to="/document">帮助文档</router-link></li>
      <template v-if="userStore.isLoggedIn">
        <li><router-link to="/console">控制台</router-link></li>
        <li><a href="#" @click.prevent="handleLogout">退出</a></li>
      </template>
      <template v-else>
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/register">注册</router-link></li>
      </template>
    </ul>
  </nav>
</template>

<script>
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const userStore = useUserStore()
    const router = useRouter()

    const handleLogout = () => {
      userStore.logout()
      router.push('/login')
    }

    return {
      userStore,
      handleLogout
    }
  }
}
</script>

<style scoped>
.navbar {
  background-color: #2a2a2a;
  padding: 1rem;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  text-align: center;
}

.navbar li {
  width: 100rem;
}

.navbar a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s;
  cursor: pointer;
}

.navbar a:hover {
  color: #6478ff;
}
</style>